/*
 * @Author: 邱狮杰
 * @Date: 2021-05-15 11:36:29
 * @LastEditTime: 2021-05-15 13:39:25
 * @FilePath: /weddingdress/src/page/selectionRecommendation/components/designList/designItem.tsx
 * @Description: 描述
 */
import { FC, MouseEvent } from "react";
import checkHook from "../../../../assets/whiteCheck.png";
import noCheckHook from "../../../../assets/whiteNoCheck.png";
import "./designItem.scss";

export interface Config {
  edit: boolean;
  check: boolean;
  designSrc: string;
}

type Props = {
  config: Config;
  onProxyCheckClick: (
    e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>
  ) => void;
};

const DesignItem: FC<Props> = ({ config, onProxyCheckClick }) => {
  const { edit, check, designSrc } = config;

  const isCheck = edit && check ? checkHook : noCheckHook;
  return (
    <div
      onClick={(e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) =>
        edit && onProxyCheckClick(e)
      }
      className="designItem"
    >
      <div
        style={edit && check ? { display: "block" } : { display: "none" }}
        className="maskBlock"
      ></div>
      <img
        style={edit ? { display: "block" } : { display: "none" }}
        className="checkPosition"
        src={isCheck}
        alt="check"
      />
      <img src={designSrc} alt="testImg" />
    </div>
  );
};
export default DesignItem;
